import React, { Component } from "react";
import PubSub from "pubsub-js";

import "./index.css";

export default class index extends Component {
  state = {
    userInfo: [],
    isFirst: true,
    isLoading: false,
    errorMessage: "",
  };

  componentDidMount() {
    //订阅消息
    PubSub.subscribe("atguigu", (name, data) => {
      console.log(name);
      this.setState(data);
    });
  }

  render() {
    const { userInfo, isFirst, isLoading, errorMessage } = this.state;

    return (
      <div className="row">
        {isFirst ? (
          <h1>点击按钮搜索</h1>
        ) : isLoading ? (
          <h1>loading...</h1>
        ) : errorMessage ? (
          <h1 style={{ color: "red" }}>{errorMessage}</h1>
        ) : (
          userInfo.map((item) => {
            return (
              <div className="card" key={item.id}>
                <a href={item.html_url} target="_blank" rel="noreferrer">
                  <img
                    src={item.avatar_url}
                    alt="avatar"
                    style={{ width: "100px" }}
                  />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
